<template>
	<div class="page-wrap">
		<div class="page-inner">
			<div class="page-table-ctx-wrap">
				<!-- 控制器 -->
				<div class="actions-box">
					<div class="control-box">
						<el-tabs v-model="activeName" @tab-click="handleClick">
							<el-tab-pane label="全部" name="全部"></el-tab-pane>
							<el-tab-pane label="售卖中" name="售卖中"></el-tab-pane>
							<el-tab-pane label="已下架" name="已下架"></el-tab-pane>
						</el-tabs>
						<div class="control-left">
							<div class="control-item">
								<el-button type="primary" @click="doAddProduct()" data-type="新页面">
									添加
								</el-button>
							</div>
						</div>
						<!-- <div class="action-item" style="margin-bottom: 15px;">
							<el-button type="primary" @click="doAddProduct()">
								添 加
							</el-button>
						</div> -->
						<div class="control-right flex">
							<div class="action-item">
								<div class="action-title">分类筛选</div>
								<div class="action-val">
									<el-cascader v-model="cascader_cate" :options="filter_cates" :props="{
										checkStrictly: true,
										children: 'child',
										value: 'id',
										label: 'title',
									}" clearable placeholder="分类筛选"></el-cascader>
								</div>
							</div>

							<!-- <div class="action-item">
								<div class="action-title">状态筛选</div>
								<div class="action-val">
									<el-select clearable="" v-model="searchParams.status" placeholder="状态筛选"
										@change="select_cate_onchange">
										<el-option v-for="item in filter_status_cates" :key="item.value"
											:label="item.title" :value="item.value">
										</el-option>
									</el-select>
								</div>
							</div> -->

							<div class="action-item">
								<div class="action-title">品牌筛选</div>
								<div class="action-val">
									<el-cascader v-model="cascader_brand_cate" :options="filter_brand_cates" :props="{
										checkStrictly: true,
										children: 'child',
										value: 'id',
										label: 'title',
									}" clearable placeholder="品牌筛选"></el-cascader>
								</div>
							</div>

							<div class="action-item">
								<div class="action-title">商品信息</div>
								<div class="action-val">
									<el-input v-model="searchParams.keyword" clearable placeholder="请输入商品信息">
										<!-- <el-button slot="append" size="small" icon="el-icon-search" @click="doSearch()">
									</el-button> -->
									</el-input>
								</div>
							</div>
							<div class="action-item">
								<el-button type="primary" @click="doSearch()">筛 选</el-button>
							</div>

						</div>
					</div>
				</div>
				<!-- 控制器 -->

				<!-- 渲染表格 -->
				<div class="table-view">
					<div class="flex" style="margin-bottom: 10px;justify-content: space-between;">
						<div class="flex">
							<div class="action-item" style="margin-right: 20px;font-size: 14px;">
								已选 {{ selectedRows.length }} 个商品
							</div>
							<div class="action-item">
								<el-button type="primary" @click="dialogVisible = true">批量上下架</el-button>
							</div>
						</div>
						<div class="flex">
							<div class="action-item" style="margin-right: 20px;">
								<el-button type="primary" @click="do_export_all()">导出所有</el-button>
							</div>
							<div class="action-item">
								<el-button type="primary" @click="do_export_filter()">导出筛选</el-button>
							</div>
						</div>
					</div>
					<w_s_table ref="w_s_table" @emitTable="emitTable" @onSelectionChange="onSelectionChange" />
				</div>
				<!-- 渲染表格 -->
				<div class="table-util">
					<div class="util-left">
						<!-- 批量选择 -->
					</div>
					<div class="util-right">
						<div class="pagi-item">
							<w_pagination v-if="tableData.length" :total="total" :pagination="pagination"
								@size-change="onSizeChange" @current-change="onCurrentChange" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog title="更改状态" :visible.sync="dialogVisible" width="400px">
			<div class="input-box flex">
				<div class="label">状态</div>
				<div>
					<el-radio-group v-model="status">
						<el-radio :label="1">售卖中</el-radio>
						<el-radio :label="-1">已下架</el-radio>
					</el-radio-group>
				</div>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="doStatus()">确 定</el-button>
			</span>
		</el-dialog>

		<w_form_modal ref="w_form_modal" @confirm="confirmFormSubmit" />
	</div>
</template>

<script>
import page_config from "@/constant/product/product-list.js";
import page_mixin from "@/mixins/page_mixin.js";
export default {
	name: "product",
	mixins: [page_mixin],
	components: {

	},
	data() {
		return {
			page_config,

			searchParams: {
				keyword: '',
				channelId: '',
				brandId: '',
				status: '',
				page: 1,
				pageNum: 10,
			},

			filter_cates: [],
			cascader_cate: '',

			filter_status_cates: [{
				title: '全部状态',
				value: '',
			},
			{
				title: '售卖中',
				value: 1,
			},
			{
				title: '已下架',
				value: -1,
			}],

			filter_brand_cates: [],
			cascader_brand_cate: '',

			activeName: '全部',

			selectedRows: "",
			dialogVisible: false,
			status: "",
		};
	},
	computed: {
	},
	watch: {
		cascader_cate(value) {
			this.$log('watch 分类', value)
			this.searchParams.channelId = value[value.length - 1]

			this.initQuery()
		},

		cascader_brand_cate(value) {
			this.$log('watch 分类', value)
			this.searchParams.brandId = value[value.length - 1]

			this.initQuery()
		},
	},
	created() {
		this.query_filters()
	},
	mounted() {

	},
	methods: {
		query_filters() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "product_getProductChannelList",
				}
			}).then(res => {
				if (res.code == 200) {
					this.filter_cates = res.data.list;
				}
			})



			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "product_getProductBrandList",
				}
			}).then(res => {
				if (res.code == 200) {
					this.filter_brand_cates = res.data.list;
				}
			})
		},
		do_export_all() {
			let token = this.mix_get_token()
			let url =
				`${this.API_ROOT}?action=product_daochu&page=&pageSize=&status=&keyword=&channeId=&brandId=&token=${token}`
			window.open(url, '_blank')
		},

		do_export_filter() {
			let token = this.mix_get_token()

			let url =
				`${this.API_ROOT}?action=product_daochu&page=1&pageSize=1000000&status=${this.searchParams.status}&keyword=${this.searchParams.keyword}&channelId=${this.searchParams.channelId}&brandId=${this.searchParams.brandId}&token=${token}`
			window.open(url, '_blank')

		},
		format_list_data(list) {
			list.forEach(v => {
				v.units = v.units[0].title
			})
		},
		doAddProduct() {
			this.$router.push('/product-form')
		},
		doRowEdit(row) {
			// this.initFormModal()
			// this.$refs.w_form_modal.initEdit(row);
			this.$router.push({
				path: '/product-form',
				query: {
					id: row.id,
					ggid: row.inventoryId,
				}
			})
		},
		onSelectionChange(selectedRows) {
			this.selectedRows = selectedRows
		},
		doStatus() {
			if (!this.selectedRows) {
				alert('请选择要操作的商品')
				return
			}
			if (!this.status) {
				alert('请选择状态')
				return
			}
			let ids = this.selectedRows.map(v => v.id)

			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "product_allProductStatus",
					id: ids.join(','),
					status: this.status
				}
			}).then(res => {
				if (res.code == 200) {
					this.setView()
					this.dialogVisible = false
					this.$message({
						message: res.msg,
						type: 'success'
					});
					this.status = ""
				} else {
					alertErr(res.msg)
				}
			})
		},

		handleClick(tab, event) {
			if (tab.name == '全部') {
				this.searchParams = {
					keyword: '',
					channelId: '',
					brandId: '',
					status: '',
					page: 1,
					pageNum: 10,
				}
				this.initQuery()
			} else if (tab.name == '售卖中') {
				this.searchParams.status = 1
				this.initQuery()
			} else if (tab.name == '已下架') {
				this.searchParams.status = -1
				this.initQuery()
			}
		},
		doRowOther(row, action_title) {
			if (action_title == '下架') {
				this.$confirm('确认下架该商品?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$api({
						url: '/admin_service.php',
						method: 'get',
						data: {
							action: "product_allProductStatus",
							id: row.id,
							status: -1
						}
					}).then(res => {
						this.setView()
						if (res.code == 200) {
							this.setView()
							this.$message({
								message: res.msg,
								type: 'success'
							});
							this.status = ""
						} else {
							alertErr(res.msg)
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消下架'
					});
				});
			} else if (action_title == '上架') {
				this.$confirm('确认上架该商品?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$api({
						url: '/admin_service.php',
						method: 'get',
						data: {
							action: "product_allProductStatus",
							id: row.id,
							status: 1
						}
					}).then(res => {
						this.setView()
						if (res.code == 200) {
							this.setView()
							this.$message({
								message: res.msg,
								type: 'success'
							});
							this.status = ""
						} else {
							alertErr(res.msg)
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消上架'
					});
				});
			}else if (action_title == '复制链接') {
				console.log(row,'行11',window.location.hostname) 
				let productUrl=window.location.hostname+'/h5/pages-pkg-product/pages/product/product-detail?id=161'
				  try {
					navigator.clipboard.writeText(productUrl);
					alert('复制成功！');
				  } catch (err) {
					console.error('复制失败', err);
					alert('复制失败！');
				  }
				    
			}
		},
		//筛选相关
		select_cate_onchange() {
			this.initQuery()
		}
	},
};
</script>

<style scoped lang="less">
// /deep/ .el-table table {
//   width: 100% !important;

//   thead {
//     th.el-table__cell {
//       background: #f8f8f8;
//       color: #000;
//     }
//   }
// }
.input-box {
	margin-bottom: 15px;
	position: relative;

	&.flex {
		display: flex;
		align-items: flex-start;
		align-items: center;

		.label {
			margin-bottom: 0;
		}
	}

	.label {
		margin-left: 40px;
		min-width: 80px;
		margin-bottom: 20px;
		font-size: 14px;
		color: #6e7285;
	}
}

.page-table-ctx-wrap {
	background: #fff;
	padding: 20px;
	border-radius: 6px;
}

// 新增
.control-box {
	// .flex-between();

	// .control-left {
	// 	.flex();

	// 	.control-item {
	// 		margin-right: 10px;
	// 	}
	// }

	.control-right {
		.flex();

		flex-wrap: wrap; // 允许换行

		// .action-item {
		// 	margin-left: 10px;
		// }
		.action-item {
			margin-bottom: 15px;
			display: flex;
			align-items: center;
			margin-right: 15px;
			margin-right: 30px;

			.action-title {
				// min-width: 80px;
				margin-right: 10px;
				margin-right: 15px;
				font-size: 14px;
				font-weight: 600;
			}

			.action-val {}
		}
	}
}

.table-view {
	margin-top: 20px;
	margin-bottom: 20px;
}


// 表格工具栏
.table-util {
	.flex-between();

	.util-left {
		.flex();
		min-width: 100px;

		.util-items {
			.flex();

			.item {
				margin-right: 10px;
			}
		}
	}

	.util-right {}
}
</style>